<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!-- 统计卡片 -->
            <el-col :span="6" v-for="(item, index) in statisticsData" :key="index">
                <el-card shadow="hover" class="statistics-card">
                    <div class="card-content">
                        <div class="card-title">{{ item.title }}</div>
                        <div class="card-value">{{ item.value }}</div>
                        <div class="card-trend" :class="item.trend >= 0 ? 'up' : 'down'">
                            <i :class="item.trend >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
                            {{ Math.abs(item.trend) }}%
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="chart-row">
            <!-- 访问量统计 -->
            <el-col :span="12">
                <el-card shadow="hover">
                    <div slot="header">
                        <span>访问量统计</span>
                        <el-radio-group v-model="visitTimeRange" size="small" style="float: right">
                            <el-radio-button label="week">本周</el-radio-button>
                            <el-radio-button label="month">本月</el-radio-button>
                            <el-radio-button label="year">全年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="chart-container">
                        <visit-chart :data="visitData" :loading="visitLoading" />
                    </div>
                </el-card>
            </el-col>

            <!-- 用户增长统计 -->
            <el-col :span="12">
                <el-card shadow="hover">
                    <div slot="header">
                        <span>用户增长统计</span>
                        <el-radio-group v-model="userTimeRange" size="small" style="float: right">
                            <el-radio-button label="week">本周</el-radio-button>
                            <el-radio-button label="month">本月</el-radio-button>
                            <el-radio-button label="year">全年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="chart-container">
                        <user-chart :data="userData" :loading="userLoading" />
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="chart-row">
            <!-- 订单统计 -->
            <el-col :span="12">
                <el-card shadow="hover">
                    <div slot="header">
                        <span>订单统计</span>
                        <el-radio-group v-model="orderTimeRange" size="small" style="float: right">
                            <el-radio-button label="week">本周</el-radio-button>
                            <el-radio-button label="month">本月</el-radio-button>
                            <el-radio-button label="year">全年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="chart-container">
                        <order-chart :data="orderData" :loading="orderLoading" />
                    </div>
                </el-card>
            </el-col>

            <!-- 销售额统计 -->
            <el-col :span="12">
                <el-card shadow="hover">
                    <div slot="header">
                        <span>销售额统计</span>
                        <el-radio-group v-model="salesTimeRange" size="small" style="float: right">
                            <el-radio-button label="week">本周</el-radio-button>
                            <el-radio-button label="month">本月</el-radio-button>
                            <el-radio-button label="year">全年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="chart-container">
                        <sales-chart :data="salesData" :loading="salesLoading" />
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getStatisticsData, getVisitData, getUserData, getOrderData, getSalesData } from '@/api/system'
import VisitChart from './components/VisitChart'
import UserChart from './components/UserChart'
import OrderChart from './components/OrderChart'
import SalesChart from './components/SalesChart'

export default {
    name: 'Statistics',
    components: {
        VisitChart,
        UserChart,
        OrderChart,
        SalesChart
    },
    data() {
        return {
            // 统计数据
            statisticsData: [
                { title: '今日访问量', value: 0, trend: 0 },
                { title: '今日新增用户', value: 0, trend: 0 },
                { title: '今日订单数', value: 0, trend: 0 },
                { title: '今日销售额', value: 0, trend: 0 }
            ],
            // 时间范围
            visitTimeRange: 'week',
            userTimeRange: 'week',
            orderTimeRange: 'week',
            salesTimeRange: 'week',
            // 图表数据
            visitData: [],
            userData: [],
            orderData: [],
            salesData: [],
            // 加载状态
            visitLoading: false,
            userLoading: false,
            orderLoading: false,
            salesLoading: false
        }
    },
    created() {
        this.getStatisticsData()
        this.getVisitData()
        this.getUserData()
        this.getOrderData()
        this.getSalesData()
    },
    watch: {
        visitTimeRange() {
            this.getVisitData()
        },
        userTimeRange() {
            this.getUserData()
        },
        orderTimeRange() {
            this.getOrderData()
        },
        salesTimeRange() {
            this.getSalesData()
        }
    },
    methods: {
        async getStatisticsData() {
            try {
                const { data } = await getStatisticsData()
                this.statisticsData = [
                    { title: '今日访问量', value: data.visitCount, trend: data.visitTrend },
                    { title: '今日新增用户', value: data.userCount, trend: data.userTrend },
                    { title: '今日订单数', value: data.orderCount, trend: data.orderTrend },
                    { title: '今日销售额', value: data.salesAmount, trend: data.salesTrend }
                ]
            } catch (error) {
                console.error('获取统计数据失败:', error)
            }
        },
        async getVisitData() {
            this.visitLoading = true
            try {
                const { data } = await getVisitData({ timeRange: this.visitTimeRange })
                this.visitData = data
            } catch (error) {
                console.error('获取访问量数据失败:', error)
            }
            this.visitLoading = false
        },
        async getUserData() {
            this.userLoading = true
            try {
                const { data } = await getUserData({ timeRange: this.userTimeRange })
                this.userData = data
            } catch (error) {
                console.error('获取用户数据失败:', error)
            }
            this.userLoading = false
        },
        async getOrderData() {
            this.orderLoading = true
            try {
                const { data } = await getOrderData({ timeRange: this.orderTimeRange })
                this.orderData = data
            } catch (error) {
                console.error('获取订单数据失败:', error)
            }
            this.orderLoading = false
        },
        async getSalesData() {
            this.salesLoading = true
            try {
                const { data } = await getSalesData({ timeRange: this.salesTimeRange })
                this.salesData = data
            } catch (error) {
                console.error('获取销售额数据失败:', error)
            }
            this.salesLoading = false
        }
    }
}
</script>

<style scoped>
.statistics-card {
    margin-bottom: 20px;
}

.card-content {
    text-align: center;
}

.card-title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 10px;
}

.card-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 10px;
}

.card-trend {
    font-size: 12px;
}

.card-trend.up {
    color: #67C23A;
}

.card-trend.down {
    color: #F56C6C;
}

.chart-row {
    margin-bottom: 20px;
}

.chart-container {
    height: 300px;
}</style> 